<template>
  <pull-to :bottom-load-method="loadmore" @bottom-state-change="stateChange">
    <ul class="list">
      <li v-for="item in dataList" :key="item.key">
        {{ item }}
      </li>
    </ul>
    <!-- vue 2.5 use slot-scope -->
    <template slot="bottom-block" slot-scope="props">
      <div class="bottom-load-wrapper">
        <svg
          class="icon"
          :class="{
            'icon-arrow': props.state === 'trigger',
            'icon-loading': props.state === 'loading'
          }"
          aria-hidden="true"
        >
          <use :xlink:href="iconLink"></use>
        </svg>
        {{ props.stateText }}
      </div>
    </template>
  </pull-to>
</template>
<script>
import PullTo from '@/components/VuePullTo';

export default {
  name: 'simple-pull-to-loadmore',
  components: {
    PullTo
  },
  data() {
    return {
      dataList: [
        '(ง •̀_•́)ง',
        '(´・ω・`) ',
        '（/TДT)/ ',
        '>ㅂ<',
        'o(*≧▽≦)ツ',
        '(≖ ‿ ≖)✧',
        '(o^∇^o)ﾉ',
        ' (´・ω・)ﾉ',
        '(´・ω・`)',
        'ヽ(･ω･｡)ﾉ',
        '(｀･ω･´)',
        '╰(*°▽°*)╯',
        '╮(￣▽￣)╭',
        '(￣▽￣)~*',
        '(⊙ˍ⊙)',
        '(￣0 ￣)y'
      ],
      iconLink: ''
    };
  },
  methods: {
    loadmore(loaded) {
      setTimeout(() => {
        this.dataList = this.dataList.concat(this.dataList);
        loaded('done');
      }, 2000);
    },
    stateChange(state) {
      if (state === 'pull' || state === 'trigger') {
        this.iconLink = '#icon-arrow-bottom';
      } else if (state === 'loading') {
        this.iconLink = '#icon-loading';
      } else if (state === 'loaded-done') {
        this.iconLink = '#icon-finish';
      }
    }
  }
};
</script>
<style scoped lang="scss">
@import '../../style/load-more.css';
.list {
  font-size: 16px;
  height: 100vh;
  li:nth-child(even) {
    background: #eee;
  }
}
&li {
  padding-left: 15px;
  height: 50px;
  line-height: 50px;
  background: #fff;

  a {
    display: block;
    height: 100%;
  }
}
</style>
